<template>
  <div class="my_info">
    <div class="title_myinfo">基本设置</div>
    <a-form-model
      layout="vertical"
      :model="form"
      ref="ruleForm"
      :rules="rules"
    >
      <a-form-model-item label="用户名">
        <div>{{form.username}}</div>
        <!-- <a-input v-model="form.username" disabled placeholder="请输入用户名" /> -->
      </a-form-model-item>
      <a-form-model-item label="组织机构">
        <div>{{ organizations }}</div>
      </a-form-model-item>x
      <a-form-model-item label="邮箱" prop="email">
        <a-input v-model="form.email" placeholder="请输入邮箱" />
      </a-form-model-item>
      <a-form-model-item label="手机号" prop="phone">
        <a-input v-model="form.phone" placeholder="请输入手机号" />
      </a-form-model-item>
      <a-form-model-item label="说明" prop="remark">
        <a-textarea :auto-size="{ minRows: 4 }" v-model="form.remark" placeholder="为自己写下一些说明信息吧！" />
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" :loading="buttonLoading" @click="onSaveUserInfo">更新基本信息</a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import store from '@/store'
  export default {
    data () {
      return {
        form: {},
        organizations:'',
        oldForm: {},
        buttonLoading: false,
        rules: {
          email: [
            { pattern: /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,4}$/ ,message: '请输入规范的邮箱', trigger: 'blur'}
          ],
          phone: [
            { pattern: /^1[3|4|5|7|8]\d{9}$/, message: '请输入规范的手机号', trigger: 'blur'}
          ],
          remark: [
            { max: 255, message: '说明信息的最大长度为255位！', trigger: 'blur' }
          ]
        }
      }
    },
    mounted () {
      this.form = { ...this.$store.getters.userInfo }
      this.oldForm = { ...this.$store.getters.userInfo }
      const orgs = store.getters.orgs
      if (orgs && orgs.length > 0){
        for (let i in orgs){
          this.organizations += orgs[i].name + ', '
        }
      }
    },
    methods: {
      onSaveUserInfo () {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            this.buttonLoading = true
            this.$store.dispatch('UpdateUserInfo',{...this.form})
            .then(res => {
              this.SuccessHint(res)
            })
            .catch(err => {
              this.FailedHint(err)
            })
            .finally(() => {
              this.buttonLoading = false
            })
          } else {
            setTimeout(() => {
              this.buttonLoading = false
            }, 1500)
            return false;
          }
        });

      },
      onCancelInfo () {
        this.form = { ...this.oldForm }
      },
      SuccessHint (res) {
        setTimeout(() => {
          this.$notification.success({
            message: '提示',
            description: res.msg
          })
        }, 1000)
      },
      FailedHint (err) {
        this.$notification['error']({
          message: '错误',
          description: err.msg || '请求出现错误，请稍后再试',
          duration: 4
        })
      }
    }
  }
</script>

<style scoped>
.title_myinfo {
  font-size: 24px;
  line-height: 70px;
}

.my_info{
  max-width: 1000px;
}

.my_info>>>.ant-form label {
  font-size: 16px;
}
</style>
